.circle-chevron {
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  outline: none;

  .circle {
    @include shadow-flat;
    height: 36px;
    width: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    transition: transform 150ms, box-shadow 150ms, background-color 150ms;
  }

  svg {
    width: 11px;
    margin-left: 11px;
    transition: transform 150ms;
  }

  &:hover {
    .circle {
      transform: scale(1.05);
      @include shadow-medium;
    }
  }

  &:active {
    .circle {
      transform: scale(1);
      @include shadow-flat;
    }

    svg {
      transform: translateX(-2px);
    }
  }

  // &.dark (default)
  .circle {
    background-color: $gray-5;

    &:hover {
      background-color: lighten($gray-5, 2%);
    }

    &:active {
      background-color: $gray-9;
    }

    svg {
      fill: white;
      stroke: white;
    }
  }

  &.light {
    .circle {
      background-color: white;

      &:hover {
        background-color: darken(white, 3%);
      }

      &:active {
        background-color: white;
      }
    }

    svg {
      fill: $gray-5;
      stroke: $gray-5;
    }
  }

  &.left {
    transform: rotateY(0);
  }

  &.right {
    transform: rotateY(180deg);
  }

  &.expand {
    svg {
      margin-left: 8px;
    }
  }
}
